<template>
  <div>
    <div class="comment" v-show="!loginInfo">
      <h2>评论</h2>
      <div class="comment-msg">
        <div class="comment-img">
          <img :src="userInfo.avator">
        </div>
        <el-input class="comment-input" type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
        </el-input>
      </div>
      <el-button type="primary" class="sub-btn" @click="goComment">评论</el-button>
    </div>
    <p>精彩评论：共{{commentList.length}}条评论</p>
    <ul class="popular" v-for="(item,index) in commentList" :key="index">
      <li>
        <div class="popular-img">
          <img :src="commentUser[index].avator" v-if="commentUser[index]">
        </div>
        <div class="popular-msg">
          <ul>
            <li class="name" v-if="commentUser[index]">{{commentUser[index].username}}</li>
            <li class="time">{{item.createTime}}</li>
            <li class="content">{{item.content}}</li>
          </ul>
        </div>
        <div class="up" ref="up" @click="addUp(item.id,item.up,index)">
          <svg class="icon">
            <use xlink:href="#icon-zan"></use>
          </svg>
          {{item.up}}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "Comment",
  props:['type'],
  mounted() {
    this.songListId=this.$route.params.id
    this.getComment()
    this.getUserInfo()
  },
  data(){
    return{
      commentList:[],
      userInfo:{},
      textarea:'',
      songListId:'',
      commentUser:[]
    }
  },
  methods:{
    //获取评论
    async getComment(){
      let result=await this.$API.reqShowCommentBySongListId(this.songListId)
      if (result.code==10000){
        this.commentList=result.data
        result.data.forEach((item)=>{
         this.getCommentUser(item.userId)
        })
      }else {
        this.$notify.warning('暂无评论，请多多评论!!')
        // await Promise.reject(new Error('fail'))
      }
    },
    async getUserInfo(){
     let result=await this.$API.reqShowConsumerById(this.userId)
      if (result.code==10000){
        this.userInfo=result.data
      }
    },
    async getCommentUser(id){
     let result= await this.$API.reqShowConsumerById(id)
      if (result.code==10000){
        this.commentUser.push(result.data)
      }
    },
    async goComment(){
     let params=new URLSearchParams()
      params.append('userId',this.userId)
      params.append('type',this.type)
      params.append('songListId',this.songListId)
      params.append('songId',null)
      params.append('content',this.textarea)
      let result=await this.$API.reqAddComment(params)
      if (result.code==10000){
        this.$notify.success('评论成功')
        await this.getComment()
      }else{
        this.$notify.error('评论失败')
      }
    },
    async addUp(id,up,index){
      if (!this.loginInfo){
        {
          let params = new URLSearchParams()
          params.append('id',id)
          params.append('up',up+1)
          let result=await this.$API.reqAddCommentUp(params)
          if (result.code=10000){
            this.$notify.success('点赞成功')
            this.$refs.up[index].children[0].style.color = '#cd274e';
            await this.getComment()
          }else {
            this.$notify.error('点赞失败')
          }
        }
      }else {
        this.$notify.warning('亲！你还未登录！！')
      }
    }
  },
  computed:{
    ...mapState({
      userId:state => state.home.userId,
      loginInfo:state => state.home.loginInfo
    })
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/comment.scss';
</style>
